<template>
  <view class="skill-classroom-page">
    <!-- 顶部导航栏 -->
    <view class="navbar">
      <view class="navbar-left" @click="navigateBack">
        <text class="icon-arrow-left">←</text>
      </view>
      <view class="navbar-title">技能课堂</view>
      <view class="navbar-right" @click="showLearningCenter">
        <text class="icon-center" style="font-size: 30rpx;">我的</text>
      </view>
    </view>

    <!-- 头部横幅 -->
    <view class="header-banner">
      <view class="banner-content">
        <view class="banner-text">
          <view class="banner-title">无人机技能提升</view>
          <view class="banner-desc">从基础到精通，一站式学习平台</view>
          <button class="banner-btn" @click="startLearning">
            开始学习
          </button>
        </view>
        <view class="banner-image">
          <image src="https://picsum.photos/id/1059/300/200" mode="cover" alt="无人机飞行培训场景"></image>
        </view>
      </view>
    </view>

    <!-- 驾照报名入口 -->
    <view class="license-entry">
      <view class="entry-card" @click="navigateToLicenseApply">
        <view class="entry-icon">
          <text class="icon-license">📜</text>
        </view>
        <view class="entry-info">
          <view class="entry-title">无人机驾照报考</view>
          <view class="entry-desc">官方授权考点，一站式报名服务</view>
        </view>
        <view class="entry-arrow">
          <text class="icon-arrow">→</text>
        </view>
      </view>
    </view>

    <!-- 内容分类标签 -->
    <view class="content-tabs">
      <view 
        class="tab-item" 
        :class="{ active: activeTab === 'courses' }"
        @click="activeTab = 'courses'"
      >
        基础课程
      </view>
      <view 
        class="tab-item" 
        :class="{ active: activeTab === 'exams' }"
        @click="activeTab = 'exams'"
      >
        题库练习
      </view>
    </view>

    <!-- 内容区域 -->
    <view class="content-container">
      <!-- 基础课程 -->
      <view class="courses-content" v-if="activeTab === 'courses'">
        <view class="section-header">
          <view class="section-title">推荐课程</view>
          <view class="section-more" @click="navigateToAllCourses">
            查看全部 →
          </view>
        </view>
        
        <view class="courses-list">
          <view class="course-card" v-for="(course, index) in recommendedCourses" :key="index" @click="navigateToCourseDetail(course.id)">
            <view class="course-image">
              <image :src="course.image" mode="cover" :alt="course.title"></image>
              <view class="course-duration">
                <text class="icon-time">⏱️</text>
                <text>{{ course.duration }}</text>
              </view>
            </view>
            <view class="course-info">
              <view class="course-title">{{ course.title }}</view>
              <view class="course-meta">
                <view class="meta-item">
                  <text class="icon-level">{{ course.level === 'beginner' ? '入门' : course.level === 'intermediate' ? '进阶' : '精通' }}</text>
                </view>
                <view class="meta-item">
                  <text class="icon-students">👨‍🎓 {{ course.students }}人学习</text>
                </view>
              </view>
              <view class="course-progress" v-if="course.learnedProgress > 0">
                <view class="progress-bar">
                  <view class="progress-fill" :style="{ width: course.learnedProgress + '%' }"></view>
                </view>
                <view class="progress-text">已学习 {{ course.learnedProgress }}%</view>
              </view>
            </view>
          </view>
        </view>
        
        <view class="section-header">
          <view class="section-title">分类课程</view>
        </view>
        
        <view class="category-courses">
          <view class="category-item" v-for="(category, index) in courseCategories" :key="index" @click="navigateToCategoryCourses(category.id)">
            <view class="category-icon">{{ category.icon }}</view>
            <view class="category-name">{{ category.name }}</view>
            <view class="category-count">{{ category.courseCount }}门课程</view>
          </view>
        </view>
      </view>

      <!-- 题库练习 -->
      <view class="exams-content" v-if="activeTab === 'exams'">
        <view class="section-header">
          <view class="section-title">执照考试题库</view>
          <view class="section-desc">针对不同类型执照的专项练习</view>
        </view>
        
        <view class="license-exams">
          <view class="exam-card" v-for="(exam, index) in licenseExams" :key="index" @click="navigateToExamDetail(exam.id)">
            <view class="exam-type">{{ exam.type }}</view>
            <view class="exam-info">
              <view class="exam-title">{{ exam.title }}</view>
              <view class="exam-meta">
                <view class="meta-item">
                  <text>{{ exam.questionCount }}题</text>
                </view>
                <view class="meta-item">
                  <text>{{ exam.passScore }}分及格</text>
                </view>
                <view class="meta-item">
                  <text class="icon-pass">通过率 {{ exam.passRate }}%</text>
                </view>
              </view>
            </view>
            <view class="exam-progress" v-if="exam.completedRate > 0">
              <view class="progress-text">{{ exam.completedRate }}% 已完成</view>
            </view>
          </view>
        </view>
        
        <view class="section-header">
          <view class="section-title">领域专项题库</view>
          <view class="section-desc">按应用领域分类的技能练习</view>
        </view>
        
        <view class="field-exams">
          <view class="field-grid">
            <view class="field-item" v-for="(field, index) in fieldExams" :key="index" @click="navigateToFieldExam(field.id)">
              <view class="field-icon">{{ field.icon }}</view>
              <view class="field-name">{{ field.name }}</view>
              <view class="field-questions">{{ field.questionCount }}题</view>
            </view>
          </view>
        </view>
        
        <view class="section-header">
          <view class="section-title">模拟考试</view>
          <view class="section-desc">真实还原考试场景，检验学习成果</view>
        </view>
        
        <view class="mock-exams">
          <view class="mock-card" @click="navigateToMockExam">
            <view class="mock-icon">
              <text class="icon-mock">📝</text>
            </view>
            <view class="mock-info">
              <view class="mock-title">无人机综合模拟考试</view>
              <view class="mock-desc">100道题 · 90分钟 · 80分及格</view>
            </view>
            <view class="mock-action">
              <text>开始考试</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    

    <!-- 学习进度弹窗 -->
    <view class="modal-overlay" v-if="showLearningModal" @click="showLearningModal = false">
      <view class="modal-dialog learning-modal" @click.stop>
        <view class="modal-title">我的学习进度</view>
        <view class="learning-stats">
          <view class="stat-item">
            <view class="stat-value">{{ learningStats.coursesStarted }}</view>
            <view class="stat-label">已开始课程</view>
          </view>
          <view class="stat-item">
            <view class="stat-value">{{ learningStats.coursesCompleted }}</view>
            <view class="stat-label">已完成课程</view>
          </view>
          <view class="stat-item">
            <view class="stat-value">{{ learningStats.questionsAnswered }}</view>
            <view class="stat-label">已答题数</view>
          </view>
          <view class="stat-item">
            <view class="stat-value">{{ learningStats.examsTaken }}</view>
            <view class="stat-label">已参加考试</view>
          </view>
        </view>
        <view class="recent-learning">
          <view class="recent-title">最近学习</view>
          <view class="recent-item" v-for="(item, index) in recentLearning" :key="index">
            <view class="recent-icon">{{ item.icon }}</view>
            <view class="recent-info">
              <view class="recent-name">{{ item.name }}</view>
              <view class="recent-progress">{{ item.progress }}</view>
            </view>
          </view>
        </view>
        <button class="close-modal-btn" @click="showLearningModal = false">
          继续学习
        </button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 活跃标签
      activeTab: 'courses',
      
      // 推荐课程
      recommendedCourses: [
        {
          id: 1,
          title: '无人机基础操作教程',
          image: 'https://picsum.photos/id/1015/300/200',
          duration: '8小时',
          level: 'beginner',
          students: 1256,
          learnedProgress: 35
        },
        {
          id: 2,
          title: '航拍技巧与构图原理',
          image: 'https://picsum.photos/id/1016/300/200',
          duration: '6小时',
          level: 'intermediate',
          students: 892,
          learnedProgress: 0
        },
        {
          id: 3,
          title: '无人机法律法规解读',
          image: 'https://picsum.photos/id/1019/300/200',
          duration: '4小时',
          level: 'beginner',
          students: 1532,
          learnedProgress: 100
        }
      ],
      
      // 课程分类
      courseCategories: [
        {
          id: 1,
          name: '飞行基础',
          icon: '✈️',
          courseCount: 12
        },
        {
          id: 2,
          name: '航拍技巧',
          icon: '📸',
          courseCount: 8
        },
        {
          id: 3,
          name: '设备维护',
          icon: '🔧',
          courseCount: 6
        },
        {
          id: 4,
          name: '法律法规',
          icon: '📜',
          courseCount: 5
        },
        {
          id: 5,
          name: '行业应用',
          icon: '🏭',
          courseCount: 9
        },
        {
          id: 6,
          name: '进阶飞行',
          icon: '🚀',
          courseCount: 7
        }
      ],
      
      // 执照考试题库
      licenseExams: [
        {
          id: 1,
          type: '民航局执照',
          title: '驾驶员执照理论题库',
          questionCount: 500,
          passScore: 70,
          passRate: 68,
          completedRate: 25
        },
        {
          id: 2,
          type: 'AOPA证书',
          title: 'AOPA驾驶员考试题库',
          questionCount: 450,
          passScore: 60,
          passRate: 72,
          completedRate: 0
        },
        {
          id: 3,
          type: 'UTC证书',
          title: 'UTC操作证书题库',
          questionCount: 400,
          passScore: 65,
          passRate: 75,
          completedRate: 0
        }
      ],
      
      // 领域专项题库
      fieldExams: [
        {
          id: 1,
          name: '航拍服务',
          icon: '📸',
          questionCount: 180
        },
        {
          id: 2,
          name: '测绘建模',
          icon: '🗺️',
          questionCount: 220
        },
        {
          id: 3,
          name: '巡检服务',
          icon: '🔍',
          questionCount: 150
        },
        {
          id: 4,
          name: '植保服务',
          icon: '🌱',
          questionCount: 130
        },
        {
          id: 5,
          name: '应急救援',
          icon: '🚒',
          questionCount: 160
        },
        {
          id: 6,
          name: '电力巡检',
          icon: '⚡',
          questionCount: 140
        }
      ],
      
      // 学习统计数据
      learningStats: {
        coursesStarted: 5,
        coursesCompleted: 2,
        questionsAnswered: 128,
        examsTaken: 3
      },
      
      // 最近学习
      recentLearning: [
        {
          icon: '📚',
          name: '无人机基础操作教程',
          progress: '已学习 35%'
        },
        {
          icon: '📝',
          name: '民航局执照理论题库',
          progress: '已完成 25%'
        }
      ],
      
      // 弹窗控制
      showLearningModal: false
    };
  },
  
  methods: {
    // 返回上一页
    navigateBack() {
      uni.navigateBack();
    },
    
    // 导航到首页
    navigateToHome() {
      uni.redirectTo({
        url: '/pages/index/index'
      });
    },
    
    // 导航到飞手大厅
    navigateToPilotHall() {
      uni.redirectTo({
        url: '/pages/pilot/hall'
      });
    },
    
    // 导航到技能课堂
    navigateToClassroom() {
      // 当前已在技能课堂页面
    },
    
    // 导航到个人中心
    navigateToMyCenter() {
      uni.redirectTo({
        url: '/pages/user/index'
      });
    },
    
    // 显示学习中心
    showLearningCenter() {
      this.showLearningModal = true;
    },
    
    // 开始学习
    startLearning() {
      // 默认进入第一个推荐课程
      this.navigateToCourseDetail(this.recommendedCourses[0].id);
    },
    
    // 导航到所有课程
    navigateToAllCourses() {
      uni.navigateTo({
        url: '/pages/skill/all-courses'
      });
    },
    
    // 导航到课程详情
    navigateToCourseDetail(courseId) {
      uni.navigateTo({
        url: `/pages/skill/course-detail?id=${courseId}`
      });
    },
    
    // 导航到分类课程
    navigateToCategoryCourses(categoryId) {
      uni.navigateTo({
        url: `/pages/skill/category-courses?id=${categoryId}`
      });
    },
    
    // 导航到考试详情
    navigateToExamDetail(examId) {
      uni.navigateTo({
        url: `/pages/skill/exam-detail?id=${examId}`
      });
    },
    
    // 导航到领域题库
    navigateToFieldExam(fieldId) {
      uni.navigateTo({
        url: `/pages/skill/field-exam?id=${fieldId}`
      });
    },
    
    // 导航到模拟考试
    navigateToMockExam() {
      uni.navigateTo({
        url: '/pages/skill/mock-exam'
      });
    },
    
    // 导航到驾照报名
    navigateToLicenseApply() {
      uni.navigateTo({
        url: '/pages/skill/license-apply'
      });
    }
  }
};
</script>

<style scoped>
.skill-classroom-page {
  background-color: #f5f7fa;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  padding-bottom: 120rpx;
}

/* 导航栏样式 */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100rpx;
  padding: 0 30rpx;
  background: linear-gradient(135deg, #1E40AF, #3B82F6);
  color: #fff;
  position: relative;
}

.navbar::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.1);
  transform: scaleY(0.5);
}

.navbar-left, .navbar-right {
  width: 60rpx;
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.navbar-right {
  justify-content: flex-end;
}

.navbar-title {
  font-size: 36rpx;
  font-weight: 500;
  flex: 1;
  text-align: center;
}

.icon-arrow-left, .icon-center {
  font-size: 32rpx;
}

.icon-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 头部横幅 */
.header-banner {
  padding: 0 24rpx;
  margin-top: 30rpx;
  margin-bottom: 24rpx;
}

.banner-content {
  background: linear-gradient(135deg, #367AF6, #1E40AF);
  border-radius: 16rpx;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 30rpx;
  color: #fff;
}

.banner-text {
  flex: 1;
  padding-right: 20rpx;
}

.banner-title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 15rpx;
}

.banner-desc {
  font-size: 26rpx;
  opacity: 0.9;
  margin-bottom: 25rpx;
}

.banner-btn {
  background-color: #fff;
  color: #367AF6;
  border: none;
  border-radius: 30rpx;
  padding: 12rpx 30rpx;
  font-size: 28rpx;
  font-weight: 500;
}

.banner-image {
  width: 220rpx;
  height: 160rpx;
  border-radius: 8rpx;
  overflow: hidden;
}

.banner-image image {
  width: 100%;
  height: 100%;
}

/* 驾照报名入口 */
.license-entry {
  padding: 0 24rpx;
  margin-bottom: 24rpx;
}

.entry-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 25rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
}

.entry-icon {
  width: 80rpx;
  height: 80rpx;
  background-color: #ECF2FF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 25rpx;
}

.icon-license {
  font-size: 40rpx;
  color: #367AF6;
}

.entry-info {
  flex: 1;
}

.entry-title {
  font-size: 30rpx;
  font-weight: 500;
  color: #1D2129;
  margin-bottom: 5rpx;
}

.entry-desc {
  font-size: 24rpx;
  color: #86909C;
}

.entry-arrow {
  color: #C9CDD4;
  padding-left: 10rpx;
}

.icon-arrow {
  font-size: 30rpx;
}

/* 内容标签 */
.content-tabs {
  display: flex;
  background-color: #fff;
  margin: 0 24rpx 24rpx;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
}

.tab-item {
  flex: 1;
  height: 90rpx;
  line-height: 90rpx;
  text-align: center;
  font-size: 30rpx;
  color: #86909C;
  position: relative;
}

.tab-item.active {
  color: #367AF6;
  font-weight: 500;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4rpx;
  background-color: #367AF6;
}

/* 内容容器 */
.content-container {
  padding: 0 24rpx;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  padding: 0 5rpx;
}

.section-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #1D2129;
}

.section-desc {
  font-size: 22rpx;
  color: #86909C;
  margin-top: 5rpx;
}

.section-more {
  font-size: 24rpx;
  color: #367AF6;
}

/* 课程列表 */
.courses-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  margin-bottom: 30rpx;
}

.course-card {
  background-color: #fff;
  border-radius: 16rpx;
  display: flex;
  overflow: hidden;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
  transition: transform 0.2s;
}

.course-card:hover {
  transform: translateY(-5rpx);
}

.course-image {
  width: 200rpx;
  height: 160rpx;
  position: relative;
}

.course-image image {
  width: 100%;
  height: 100%;
}

.course-duration {
  position: absolute;
  bottom: 10rpx;
  right: 10rpx;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 20rpx;
  padding: 3rpx 10rpx;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  gap: 5rpx;
}

.icon-time {
  font-size: 18rpx;
}

.course-info {
  flex: 1;
  padding: 20rpx;
  display: flex;
  flex-direction: column;
}

.course-title {
  font-size: 28rpx;
  color: #1D2129;
  margin-bottom: 10rpx;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.course-meta {
  display: flex;
  gap: 15rpx;
  margin-bottom: 15rpx;
}

.meta-item {
  font-size: 22rpx;
  color: #86909C;
  display: flex;
  align-items: center;
}

.icon-level, .icon-students {
  display: flex;
  align-items: center;
}

.course-progress {
  margin-top: auto;
}

.progress-bar {
  height: 8rpx;
  background-color: #F2F3F5;
  border-radius: 4rpx;
  overflow: hidden;
  margin-bottom: 5rpx;
}

.progress-fill {
  height: 100%;
  background-color: #367AF6;
  border-radius: 4rpx;
  transition: width 0.3s;
}

.progress-text {
  font-size: 20rpx;
  color: #86909C;
  text-align: right;
}

/* 分类课程 */
.category-courses {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
  margin-bottom: 30rpx;
}

.category-item {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 25rpx 15rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
  text-align: center;
  transition: transform 0.2s;
}

.category-item:hover {
  transform: translateY(-5rpx);
}

.category-icon {
  font-size: 50rpx;
  margin-bottom: 15rpx;
  color: #367AF6;
}

.category-name {
  font-size: 26rpx;
  font-weight: 500;
  color: #1D2129;
  margin-bottom: 5rpx;
}

.category-count {
  font-size: 22rpx;
  color: #86909C;
}

/* 执照考试题库 */
.license-exams {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  margin-bottom: 30rpx;
}

.exam-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 25rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
  position: relative;
}

.exam-type {
  min-width: 140rpx;
  height: 50rpx;
  line-height: 50rpx;
  background-color: #ECF2FF;
  color: #367AF6;
  font-size: 24rpx;
  text-align: center;
  border-radius: 25rpx;
  margin-right: 25rpx;
}

.exam-info {
  flex: 1;
}

.exam-title {
  font-size: 28rpx;
  color: #1D2129;
  margin-bottom: 10rpx;
}

.exam-meta {
  display: flex;
  gap: 20rpx;
}

.icon-pass {
  color: #00B42A;
}

.exam-progress {
  position: absolute;
  right: 25rpx;
  top: 50%;
  transform: translateY(-50%);
  text-align: right;
}

/* 领域专项专项题库 */
.field-exams {
  margin-bottom: 30rpx;
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
}

.field-item {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 25rpx 15rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
  text-align: center;
  transition: transform 0.2s;
}

.field-item:hover {
  transform: translateY(-5rpx);
}

.field-icon {
  font-size: 50rpx;
  margin-bottom: 15rpx;
  color: #367AF6;
}

.field-name {
  font-size: 26rpx;
  font-weight: 500;
  color: #1D2129;
  margin-bottom: 5rpx;
}

.field-questions {
  font-size: 22rpx;
  color: #86909C;
}

/* 模拟考试 */
.mock-exams {
  margin-bottom: 30rpx;
}

.mock-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 25rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
  transition: transform 0.2s;
}

.mock-card:hover {
  transform: translateY(-5rpx);
}

.mock-icon {
  width: 80rpx;
  height: 80rpx;
  background-color: #ECF2FF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 25rpx;
}

.icon-mock {
  font-size: 40rpx;
  color: #367AF6;
}

.mock-info {
  flex: 1;
}

.mock-title {
  font-size: 28rpx;
  color: #1D2129;
  margin-bottom: 5rpx;
}

.mock-desc {
  font-size: 24rpx;
  color: #86909C;
}

.mock-action {
  background-color: #367AF6;
  color: #fff;
  font-size: 26rpx;
  padding: 12rpx 25rpx;
  border-radius: 30rpx;
}



/* 学习进度弹窗 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.modal-dialog {
  width: 90%;
  background-color: #fff;
  border-radius: 20rpx;
  max-height: 80vh;
  overflow-y: auto;
}

.modal-title {
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  font-size: 30rpx;
  color: #1D2129;
  border-bottom: 1px solid #F2F3F5;
}

.learning-modal {
  width: 85%;
  padding-bottom: 30rpx;
}

.learning-stats {
  display: flex;
  justify-content: space-around;
  padding: 30rpx 0;
  border-bottom: 1px solid #F2F3F5;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-value {
  font-size: 36rpx;
  font-weight: bold;
  color: #367AF6;
  margin-bottom: 10rpx;
}

.stat-label {
  font-size: 24rpx;
  color: #86909C;
}

.recent-learning {
  padding: 25rpx;
}

.recent-title {
  font-size: 26rpx;
  font-weight: 500;
  color: #1D2129;
  margin-bottom: 20rpx;
}

.recent-item {
  display: flex;
  align-items: center;
  padding: 15rpx 0;
  border-bottom: 1px solid #F2F3F5;
}

.recent-item:last-child {
  border-bottom: none;
}

.recent-icon {
  width: 50rpx;
  height: 50rpx;
  background-color: #ECF2FF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
  color: #367AF6;
  font-size: 26rpx;
}

.recent-info {
  flex: 1;
}

.recent-name {
  font-size: 26rpx;
  color: #1D2129;
  margin-bottom: 5rpx;
}

.recent-progress {
  font-size: 22rpx;
  color: #86909C;
}

.close-modal-btn {
  width: 80%;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #367AF6;
  color: #fff;
  border: none;
  border-radius: 10rpx;
  font-size: 28rpx;
  margin: 20rpx auto 0;
  display: block;
}

/* 响应式调整 */
@media (max-width: 375px) {
  .banner-content {
    flex-direction: column;
    text-align: center;
  }
  
  .banner-image {
    width: 100%;
    margin-top: 20rpx;
  }
  
  .category-item, .field-item {
    padding: 20rpx 10rpx;
  }
  
  .category-name, .field-name {
    font-size: 24rpx;
  }
  
  .exam-type {
    min-width: 120rpx;
    font-size: 22rpx;
  }
}
</style>

